<template>
	<view class="statistic-box">
		<view class="top">
			<view class="left">
				<text class="title">签收管理统计</text>
				<text class="unit">(趟次)</text>
			</view>
			<view class="right">
				<view class="item">
					<view class="icon">

					</view>
					<view class="name">
						收料趟次
					</view>
				</view>
				<view class="item">
					<view class="icon icon1">

					</view>
					<view class="name">
						出料趟次
					</view>
				</view>
			</view>
		</view>
		<Echarts class="echart-box" :style="{height:'300rpx'}" :options="option" />
	</view>
</template>
<script setup>
	import Echarts from '@/components/echarts/echarts.vue';

	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '0%',
			right: '0%',
			bottom: '0%',
			top: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: ['员工A', '员工B', '员工C', '员工D']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			name: '收料',
			type: 'bar',
			barWidth: 16,
			data: [120, 200, 150, 80],
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: '#2E87FF'
					}, {
						offset: 1,
						color: '#8FBFFF'
					}]
				}
			}
		}, {
			name: '出料',
			type: 'bar',
			barWidth: 16,
			data: [60, 100, 80, 50],
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: '#39B791'
					}, {
						offset: 1,
						color: '#7FD8BD'
					}]
				}
			}
		}]
	};
</script>
<style lang="scss" scoped>
	.statistic-box {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #0E1624;
			}

			.unit {
				font-size: 24rpx;
				color: #989DA5;
			}

			.right {
				display: flex;
			}

			.item {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #989DA5;

				.icon {
					margin-right: 10rpx;
					width: 16rpx;
					height: 16rpx;
					background-color: $primary-color;

					&.icon1 {
						background-color: #39B791;
					}
				}
			}
		}

	}
</style>